import React, { Component } from 'react'

class Child extends Component {
  render() {
    // this.props.children用来获取父组件通过双标签调用时中间所写的数据内容
    // 如果它只有一个子元素则返回为对象，如果是多个子元素则返回为数组对象
    // console.log(this.props.children)
    // children属性，模拟出vue中的插槽功能
    const { children = <div>默认值</div> } = this.props
    return (
      <div>
        <h3>我是Child组件</h3>
        <br />
        {children}
      </div>
    )
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <h2>App组件</h2>
        <hr />
        <Child>
          <div>你好1</div>
        </Child>
        {/* <Child /> */}
      </div>
    )
  }
}

export default App
